<template>

      <div class="main-container">

        <aside class="sidebar">
          <div class="logo-container">
            <img src="@/assets/car.jpg" alt="Logo" @click.prevent="welcomeVisible = true">
            <div class="audit-title">
              <p>审核员</p>
            </div>
          </div>
          <nav>
                  <ul>
                    <li>
                      <a href="#" @click.prevent="toggleSubMenu('info')">信息更改</a>
                      <div class="sub-menu" v-show="subMenu === 'info'">
                        <ul>
                          <li @click.prevent="welcomeVisible = false">
                            <router-link :to="{ name : 'ChangePassword'}">
                              更改密码
                            </router-link>
                          </li>
                          <li @click.prevent="welcomeVisible = false">
                            <router-link :to="{ name : 'PersonalInfo'}">
                              个人信息
                            </router-link>
                          </li>
                        </ul>
                      </div>
                    </li>
                    <li>
                      <a href="#" @click.prevent="toggleSubMenu('auditMaterials')">审核材料</a>
                      <div class="sub-menu" v-show="subMenu === 'auditMaterials'">
                        <ul>
                          <li @click.prevent="welcomeVisible = false">
                            <router-link :to="{ name : 'Material'}">
                              材料表
                            </router-link>
                          </li>
                          <li @click.prevent="welcomeVisible = false">
                            <router-link :to="{ name : 'Check'}">
                              体检表
                            </router-link>
                          </li>
                          <li @click.prevent="welcomeVisible = false">
                            <router-link :to="{ name : 'Register'}">
                              报名表
                            </router-link>
                          </li>
                        </ul>
                      </div>
                    </li>
                    <li @click.prevent="welcomeVisible = false">
                      <router-link :to="{ name : 'StudentAllocation'}">
                        分配教练
                      </router-link>
                    </li>
                  </ul>
          </nav>
        </aside>

        <main>
          <header class="header">
            <div class="user-info">
              <div class="user-dropdown" @click="toggleUserOptions">
                <img src="@/assets/ikun.jpg" alt="User Icon">
                <ul :class="{ 'show-dropdown': dropdownActive }">
                  <li><a href="#" @click.prevent="handleLogout">退出</a></li>
                </ul>
              </div>
              <div class="username">{{ loginUsername }}</div>
            </div>
          </header>
          <section class="content">
            <div class="audit-home" v-show="welcomeVisible" >
              <h1>欢迎审核员</h1>
              <img src="@/assets/drive1.jpg" alt="Welcome Image" />
            </div>
            <router-view v-if="!welcomeVisible"></router-view>
          </section>
        </main>
      </div>


    </template>


<script>
import Audit from './js/Audit';
export default Audit;
import './css/Audit.css';
</script>
<style scoped>

</style>